<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>趣味算法可视化</title>
    <style>
        body {
            font-family: 'Comic Sans MS', cursive, sans-serif;
            background-color: #f0f9ff;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        h1 {
            color: #2c5282;
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 40px;
        }

        .algorithms-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            padding: 20px;
        }

        .algorithm-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .algorithm-card:hover {
            transform: translateY(-5px);
        }

        .algorithm-thumbnail {
            width: 100%;
            height: 200px;
            background-size: cover;
            background-position: center;
            border-bottom: 2px solid #e2e8f0;
        }

        .algorithm-info {
            padding: 20px;
        }

        .algorithm-title {
            color: #2d3748;
            font-size: 1.5em;
            margin: 0 0 10px 0;
        }

        .algorithm-description {
            color: #4a5568;
            font-size: 1em;
            margin: 0 0 15px 0;
        }

        .try-button {
            display: inline-block;
            background-color: #4299e1;
            color: white;
            padding: 10px 20px;
            border-radius: 20px;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

        .try-button:hover {
            background-color: #3182ce;
        }

        /* 为未来的算法预留的占位样式 */
        .coming-soon {
            opacity: 0.7;
            position: relative;
        }

        .coming-soon::after {
            content: "即将推出";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎮 趣味算法可视化 🎮</h1>
        
        <div class="algorithms-grid">
            <!-- 冒泡排序卡片 -->
            <div class="algorithm-card">
                <div class="algorithm-thumbnail" style="background-image: url('images/bubble-sort-thumb.png');"></div>
                <div class="algorithm-info">
                    <h2 class="algorithm-title">冒泡排序</h2>
                    <p class="algorithm-description">通过动画演示理解冒泡排序的工作原理，看大数字如何像泡泡一样浮到右边！</p>
                    <a href="bubble-sort.html" class="try-button">开始体验</a>
                </div>
            </div>

            <!-- 快速排序卡片 -->
            <div class="algorithm-card">
                <div class="algorithm-thumbnail" style="background-image: url('images/quick-sort-thumb.png');"></div>
                <div class="algorithm-info">
                    <h2 class="algorithm-title">快速排序</h2>
                    <p class="algorithm-description">通过选择基准值(pivot)将数组分成两部分，体验分治算法的魅力！</p>
                    <a href="quick-sort.html" class="try-button">开始体验</a>
                </div>
            </div>

            <!-- 选择排序卡片 -->
            <div class="algorithm-card">
                <div class="algorithm-thumbnail" style="background-image: url('images/selection-sort-thumb.png');"></div>
                <div class="algorithm-info">
                    <h2 class="algorithm-title">选择排序</h2>
                    <p class="algorithm-description">像挑选糖果一样，每次找到最小的数放到前面！适合初学者的排序算法。</p>
                    <a href="selection-sort.html" class="try-button">开始体验</a>
                </div>
            </div>

            <!-- 插入排序卡片 -->
            <div class="algorithm-card">
                <div class="algorithm-thumbnail" style="background-image: url('images/insertion-sort-thumb.png');"></div>
                <div class="algorithm-info">
                    <h2 class="algorithm-title">插入排序</h2>
                    <p class="algorithm-description">像整理扑克牌一样，拿起一张新牌插入到合适的位置！</p>
                    <a href="insertion-sort.html" class="try-button">开始体验</a>
                </div>
            </div>

            <!-- 其他算法的占位卡片 -->
            <div class="algorithm-card coming-soon">
                <div class="algorithm-thumbnail" style="background-color: #edf2f7;"></div>
                <div class="algorithm-info">
                    <h2 class="algorithm-title">更多算法</h2>
                    <p class="algorithm-description">敬请期待...</p>
                    <a href="#" class="try-button" style="pointer-events: none;">即将推出</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 